<template>
	<view class="wrap">
		<view class="t-header app_gHeaderFixed">
			<g-header :hideRight="true">
				<template v-slot:title>
					<view class="search">
						<icon type="search" size="16"></icon>
						<input v-model="keyword" type="text" placeholder="搜索店内商品" placeholder-class="app_phc"
							:focus="focus" confirm-type="search" @confirm="onSearchConfirm">
					</view>
				</template>
			</g-header>
			<view class="nav">
				<view class="nav-item active" @click="onFilterTap('comprehensive')">全部</view>
				<!-- <view class="nav-item">活动</view> -->
				<!-- <view class="nav-item" :class="{active: isFilterType === 'time'}" @click="onFilterTap('time')">新品</view> -->
			</view>
			<view class="filter">
				<scroll-view class="filter-L" scroll-x>
					<view class="filter-item" :class="{active: isFilterType === 'comprehensive'}"
						@click="onFilterTap('comprehensive')">综合</view>
					<view class="filter-item arrowUp arrowDown"
						:class="{active: isFilterType === 'salesVol', arrowUpActive: isFilterSalesVolFlag == 2 && isFilterType === 'salesVol', arrowDownActive: isFilterSalesVolFlag == 1 && isFilterType === 'salesVol'}"
						@click="onFilterTap('salesVol')">销量</view>
					<view class="filter-item arrowUp arrowDown"
						:class="{active: isFilterType === 'price', arrowUpActive: isFilterPriceFlag == 2 && isFilterType === 'price', arrowDownActive: isFilterPriceFlag == 1 && isFilterType === 'price'}"
						@click="onFilterTap('price')">
						价格</view>
					<view class="filter-item arrowUp arrowDown"
						:class="{active: isFilterType === 'time', arrowUpActive: isFilterTimeFlag == 2 && isFilterType === 'time', arrowDownActive: isFilterTimeFlag == 1 && isFilterType === 'time'}"
						@click="onFilterTap('time')">时间
					</view>
				</scroll-view>
				<!-- <view class="filter-R">
					<image src="../../static/images/icon-hang.png" mode=""></image>
				</view> -->
			</view>
		</view>
		<view class="list1">
			<view class="item1" v-for="(item, index) in list" :key="index" @click="onSkipTap('goodsDetail', item.id)">
				<view class="item1-img">
					<image :src="item.cover"></image>
				</view>
				<view class="item1-title app_ellipsis2">{{item.productName}}</view>
				<view class="item1-bottom app_flex-aicjcsb">
					<view class="item1-price">
						<text>￥{{item.price}}</text>
						<text>/{{item.unit}}</text>
						<text>（{{item.emptyDiff}}）</text>
					</view>
					<view class="item1-salesVol">月销{{item.saleNum}}</view>
				</view>
			</view>
		</view>
		<view class="tabbar">
			<store-tabbar navindex="1"></store-tabbar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				focus: false,
				list: [],
				totalPage: 1,
				page: 1,
				size: 15,
				hasLoad: false,
				noMore: false,
				isFilterType: 'comprehensive',
				isFilterTimeFlag: 1, // 1正序 2倒序
				isFilterPriceFlag: 1, // 1正序 2倒序
				isFilterSalesVolFlag: 1, // 1正序 2倒序
			}
		},
		onLoad(options) {
			this.focus = options.focus || false
			if (!this.gUserInfo.userId) {
				this.$store.dispatch('updateUserInfo').then(() => {
					this.updatePage()
				})
			} else {
				this.updatePage()
			}
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
			resetPage() {
				this.list = []
				this.totalPage = 1
				this.page = 1
				this.size = 15
				this.hasLoad = false
				this.noMore = false
			},
			updatePage() {
				this.resetPage()
				this.getList()
			},
			onSkipTap(type, params) {
				const urlObj = {
					goodsDetail: () => {
						uni.navigateTo({
							url: `/pages/shopInfo/goodsDetail?id=${params}`
						})
					},
				}
				this.$g_util.navigationTo(urlObj, type)
			},
			onSearchConfirm() {
				this.updatePage()
			},
			getList(filter = {}) {
				if (this.page > this.totalPage) return
				const params = {
					keyword: this.keyword,
					pageNum: this.page,
					pageSize: this.size,
					createUserId: this.gUserInfo.userId,
					...filter
				}
				uni.showLoading()
				this.$g_api.productSearchProducts(params)
					// this.$g_api.shopSearchProduct({
					// 		keyword: this.keyword,
					// 		page: this.page,
					// 		size: this.size
					// 	})
					.then(({
						rows,
						totalPage
					}) => {
						this.totalPage = totalPage
						this.hasLoad = true
						if (rows?.length > 0) {
							rows = this.$g_util.concatRequestUrl(rows, 'cover')
							this.list = this.list.concat(rows)
						} else {
							this.noMore = true
						}
					}).finally(() => {
						uni.hideLoading()
					})
			},
			onFilterTap(type) {
				this.isFilterType = type
				this.resetPage()
				if (type === 'time') {
					// this.getList({
					// 	timeSort: 1
					// })
					this.getList({
						timeSort: this.isFilterTimeFlag
					})
					this.isFilterTimeFlag = this.isFilterTimeFlag == 1 ? 2 : 1
				} else if (type === 'comprehensive') {
					this.getList()
				} else if (type === 'salesVol') {
					this.getList({
						saleSort: this.isFilterSalesVolFlag
					})
					const num = this.isFilterSalesVolFlag == 1 ? 2 : 1
					console.log('hahah', num);
					this.isFilterSalesVolFlag = num
				} else if (type === 'price') {
					this.getList({
						priceSort: this.isFilterPriceFlag
					})
					this.isFilterPriceFlag = this.isFilterPriceFlag == 1 ? 2 : 1
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding-bottom: calc(20rpx + 100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + 100rpx + env(safe-area-inset-bottom));

		padding-top: calc(var(--status-bar-height) + 98rpx + 90rpx + 90rpx);
	}

	.search {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		width: 630rpx;
		height: 60rpx;
		transform: translateX(24rpx);
		border-radius: 30rpx;
		background-color: #f2f2f2;

		input {
			flex: 1;
			margin-left: 14rpx;
		}
	}

	.nav {
		display: flex;
		align-items: center;
		height: 90rpx;
		background-color: #fff;
		padding: 0 20rpx;
	}

	.nav-item {
		position: relative;
		height: 90rpx;
		line-height: 90rpx;
		padding: 0 40rpx;
		font-size: 26rpx;
		color: #333;

		&.active {
			font-size: 32rpx;
			font-weight: bold;

			&::after {
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				content: '';
				width: 60rpx;
				height: 4rpx;
				border-radius: 2rpx;
				background-color: #ff7733;

			}
		}
	}

	.filter {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		padding-left: 20rpx;
		background-color: #fff;
	}

	.filter-L {
		width: 600rpx;
		white-space: nowrap;
	}

	.filter-item {
		display: inline-block;
		padding: 20rpx 0;
		margin-right: 70rpx;
		line-height: 50rpx;

		&:first-child {
			margin-left: 30rpx;
		}

		&:last-child {
			margin-right: 30rpx;
		}

		&.active {
			color: #ff7733;
		}
	}

	.arrowUp {
		position: relative;

		&::before {
			content: '';
			position: absolute;
			right: -26rpx;
			top: 30rpx;
			border: 8rpx solid transparent;
			border-bottom: 8rpx solid #ccc;
		}
	}

	.arrowUpActive {
		&::before {
			border-bottom: 8rpx solid #000;
		}
	}

	.arrowDown {
		position: relative;

		&::after {
			content: '';
			position: absolute;
			right: -26rpx;
			top: 50rpx;
			border: 8rpx solid transparent;
			border-top: 8rpx solid #ccc;
		}
	}

	.arrowDownActive {
		&::after {
			border-top: 8rpx solid #000;
		}
	}

	.filter-R {
		padding-right: 30rpx;
		font-size: 0;

		image {
			width: 38rpx;
			height: 38rpx;
			// background-color: #ccc;
		}
	}

	.list1 {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 20rpx;
	}

	.item1 {
		position: relative;
		width: 344rpx;
		padding-bottom: 76rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #fff;
	}

	.item1-img {
		background-color: #eee;

		image {
			width: 344rpx;
			height: 344rpx;
		}
	}

	.item1-title {
		padding: 20rpx 20rpx 0;
		font-size: 26rpx;
		box-sizing: border-box;
		color: #333;
	}

	.item1-bottom {
		position: absolute;
		left: 0;
		bottom: 0;
		height: 76rpx;
		width: 344rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.item1-price {
		text {
			&:nth-child(1) {
				font-size: 26rpx;
				color: #ff4c4c;
			}

			&:nth-child(2) {
				font-size: 20rpx;
				color: #ff4c4c;
			}

			&:nth-child(3) {
				font-size: 20rpx;
				color: #999;
			}
		}
	}

	.item1-salesVol {
		font-size: 18rpx;
		color: #999;
	}

	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		z-index: 99999;
	}
</style>
